<template>
  <a @click="dialog = true">
    <span>详情</span>
    <a-modal v-model="dialog" @ok="handleOk" class="mt-8">
      <a-table rowKey="day" :columns="columns" :data-source="record.innerData" :pagination="pagination">
        <span slot="interests" slot-scope="interests">{{ minMoney(interests) }}</span>
        <span slot="limitFees" slot-scope="limitFees">{{ minMoney(limitFees) }}</span>
      </a-table>
    </a-modal>
  </a>
</template>
<script>
export default {
  name: 'singleMonth',
  components: {},
  props: ['record'],
  data() {
    return {
      dialog: false,
      columns: [
        {
          title: '日期',
          dataIndex: 'day',
          key: 'day'
        },
        {
          title: '利息',
          dataIndex: 'interests',
          key: 'interests',
          scopedSlots: { customRender: 'interests' }
        },
        {
          title: '贷款限额费',
          dataIndex: 'limitFees',
          key: 'limitFees',
          scopedSlots: { customRender: 'limitFees' }
        }
      ],
      data: [],
      pagination: {
        // total: 1,
        pageSize: 5
        // onChange: this.getData()
      }
    }
  },
  methods: {
    handleOk() {
      this.dialog = false
    },
    minMoney(v) {
      v = Number(v).toFixed(2)
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
  }
}
</script>
<style lang="css" scoped></style>
